// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
import 'echarts-gl'
// 引入柱状图
require('echarts/lib/chart/bar')
require('echarts/lib/chart/line')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/grid')
require('echarts/map/js/china.js')
import rockBg from '@/assets/dashboard/rock.png'
import bgimg from '@/assets/risk-dashboard/hot-map.png'
var title: any = ''
export default class EchartsConfig {
  private myChart: any
  private option = {
    tooltip: {
      formatter: function(params: any) {
        var info =
          '<div style="display: flex;line-height: 150px;width:480px;height:150px;color:#2fd5ff;position:relative;background-image:url(' +
          bgimg +
          ');background-repeat: no-repeat;background-size: 100% 100%;"><div style="width: 182px;height: 150px;color: #fff;font-size: 24px;position: absolute;text-align: center;">' +
          params.name +
          '</div><div style="width: 182px;height: 150px;color: #fff;font-size: 24px;position: absolute;text-align: left;position: relative;left: 182px;">' +
          title +
          '</div><div style="width: 182px;height: 150px;color: #fff;font-size: 36px;position: absolute;text-align: left;position: relative;left: 140px;">' +
          params.value +
          '</div></div>'
        return info
      },
      backgroundColor: 'rgba(255,255,255,0)' //提示标签背景颜色
      // textStyle: { color: '#fff' } //提示标签字体颜色
    },
    geo: {
      show: true,
      map: 'china',
      label: {
        normal: {
          show: false
        },
        emphasis: {
          show: false
        }
      },
      roam: false,
      itemStyle: {
        normal: {
          areaColor: '#01215c',
          borderWidth: 2, //设置外层边框
          borderColor: '#9ffcff',
          // shadowColor: 'rgba(0,54,255, 1)',
          shadowBlur: 150
        }
      }
    },
    backgroundColor: 'rgba(128, 128, 128, 0)',
    visualMap: {
      // show: true,
      // min: 0,
      // max: 1500,
      // x: 'left',
      // y: 'center',
      // splitList: [0, 1500],
      // inRange: {
      //   color: ['#eb3a53', '#34A6D2']
      //   // color: ['#e0ffff', '#006edd']
      // }
      min: 0,
      max: 500,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'],
      inRange: {
        color: ['#1890ff', '#161d8e']
      },
      show: true
    },
    series: [
      {
        type: 'map',
        map: 'china',
        label: {
          normal: {
            show: true, //显示省份标签
            textStyle: { color: '#fff' }, //省份标签字体颜色
            fontSize: 20,
            fontWeight: 'bold'
          },
          emphasis: {
            //对应的鼠标悬浮效果
            areaColor: '#7CE4FA',
            show: true,
            textStyle: { color: '#fff' }
          }
        },
        itemStyle: {
          normal: {
            borderWidth: 2, //区域边框宽度
            borderColor: '#4FBCE9', //区域边框颜色
            areaColor: '#13213A' //区域颜色
          },
          emphasis: {
            borderWidth: 0.5,
            borderColor: '#4b0082',
            areaColor: '#7CE4FA',
            shadowBlur: 20,
            shadowColor: '#a5edff'
          }
        },
        data: []
      }
    ]
  }
  constructor(domId: string) {
    this.myChart = echarts.init(document.getElementById(domId))
  }
  public setOption(data: any, dataTitle: any) {
    this.option.series[0].data = data
    title = dataTitle
    this.myChart && this.myChart.setOption(this.option)
  }
}
